<template>
    <div class="main">
        <span class="ss">可用积分</span>
        <br/>
        <span class="num">1000</span>

        <div class="div01">
            <div class="im1">
                <van-image round
                           width="3rem"
                           height="3rem"
                           fit="cover"
                           src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
                <br/>
                <span class="sss1">做任务</span>

            </div>

            <div class="im2">
                <van-image round
                           width="3rem"
                           height="3rem"
                           fit="cover"
                           src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
                <br/>
                <span class="sss1">玩游戏</span>

            </div>
            <div class="im3">
                <van-image round
                           width="3rem"
                           height="3rem"
                           fit="cover"
                           src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
                <br/>
                <span class="sss1">积分流水</span>

            </div>
        </div>

    </div>
</template>

<script>
   import { Image as VanImage } from 'vant';
    export default {
        name: "Head",
        components:{
            "van-image":VanImage
        }
    }
</script>

<style scoped>

    .sss1{
        font-size: 10px;
        margin-top: 5px;
    }
    .im1,.im2,.im3{
        display: inline-block;
    }
    .im2{
        margin-left: 15%;
        margin-right: 15%;
    }

    .ss{
        display: inline-block;
        font-size: 12px;
        margin-top: 20px;
    }
    .num{
        color: red;
        font-size: 30px;
        font-family: "微软雅黑";
    }
    .div01{
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: 4%;
        width: 90%;
        background: white;
        border-radius:10px 10px;
    }
</style>
